<!DOCTYPE html> 
<html>
  <head>
    <!--META-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.75">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <!--<link rel="stylesheet" href="API/css/datatables/css/jquery.dataTables.css"/>--> 
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="API/js/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/jquery.mobile.min.js"></script>
    <!--<script type="text/javascript" src="API/js/highcharts.js"></script>-->
    <!--<script type="text/javascript" src="API/js/modules/exporting.js"></script>-->
    <!--<script type="text/javascript" src="API/js/jquery.dataTables.min.js"></script>--> 
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/fonctions.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>

    <script language="javascript" type="text/javascript">
    checkMaintenance();
    checkAuthentification();
	
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 1;

    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////
    $(document).on('pageinit',function() {
        try {
            // Init commmun
            init_commun();

            // Init page
            chargerLastLivres();
            chargerBigTags();
        } catch (er) {
            log(0, "ERROR(init_home):" + er.message);
        }
    });

    $(document).on('pageshow',function() {
        try {
            // Fin affichage commun
            show_commun();
        } catch (er) {
            log(0, "ERROR(show):" + er.message);
        }
    });
		
    //Fin chargement page
    function OnLoad() {
        try {
            // Fin chargement
        } catch (er) {
            log(0, "ERROR(OnLoad):" + er.message);
        }
    }
		
    ///////////////////
    //BLOCK FONCTIONS METIER
    ///////////////////
    function chargerLastLivres() {
        try {
            var tabInput = {  };
            callBD("phpsql/mysql_getLastLivres.php", "POST", "json", tabInput, "vueLastLivres");
        } catch (er) {
            log(0, "ERROR(chargerLastLivres):" + er.message);
        }
    }

    function chargerBigTags() {
        try {
            var tabInput = {  };
            callBD("phpsql/mysql_getBigTags.php", "POST", "json", tabInput, "vueBigTags");
        } catch (er) {
            log(0, "ERROR(chargerBigTags):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS BD
    ///////////////////


    ///////////////////
    //BLOCK FONCTIONS AFFICHAGE
    ///////////////////
    function vueLastLivres(p_retour){
        try {
            var tabLivres = p_retour["data"]["resultat"]["data"];
            var strhtml = "";
            
            for (var indice in tabLivres) {
                
                var lettre = getLettreFroGridFromIndice(indice, 5);
                
                strhtml += "<div class=\"ui-block-"+lettre+"\">";
                strhtml += "<center>";
                strhtml += "<ul data-role=\"listview\" data-inset=\"true\" data-icon=\"false\" style=\"width: 300px;\">";
                strhtml += "<li style=\"height: 82px\">";
                strhtml += "<a href=\"javascript:window.location = ('./page_livre.html?mili="+getMilise()+"&id="+tabLivres[indice]["id"]+"');\">";
                if(tabLivres[indice]["apercu"] != ""){
                    strhtml += "<img src=\"./apercu/"+tabLivres[indice]["id"]+"_"+tabLivres[indice]["apercu"]+"\" style=\"max-width: 80px; height: auto;\">";
                }else{
                    strhtml += "<img src=\"./ebook_overview/overview-x.jpg\">";
                }
                strhtml += "<h2>"+tabLivres[indice]["titre"]+"</h2>";
                strhtml += "<p>"+tabLivres[indice]["date_parution"]+"</p>";
                strhtml += "<p class=\"ui-li-aside\">EBook</p>";
                strhtml += "</a>";
                strhtml += "</li>";
                strhtml += "</ul>";
                strhtml += "</center>";
                strhtml += "</div>";
            }
            
            $('#div_lastLivres').html(strhtml).trigger('create');
        } catch (er) {
            log(0, "ERROR(vueLastLivres):" + er.message);
        }
    }
    
    
    function vueBigTags(p_retour){
        try {
            var tabBigTags = p_retour["data"]["resultat"]["data"];
            var strhtml = "<center>";
            
            for (var indice in tabBigTags) {
                strhtml += '<a href="#" onclick="window.location = (\'./page_inventaire.html?mili='+getMilise()+'&tag='+tabBigTags[indice]["tag"]+'\');" class="ui-btn ui-corner-all ui-btn-inline ui-icon-delete ui-btn-icon-left" title="'+tabBigTags[indice]["tag"]+'">'+tabBigTags[indice]["tag"]+'</a>';
            }
            
            strhtml += "</center>";
            
            $('#div_tags').html(strhtml).trigger('create');
        } catch (er) {
            log(0, "ERROR(vueBigTags):" + er.message);
        }
    }
		
    </script>
  </head>
  <body onload="OnLoad();">
    
	<!-- page -->
	<div data-role="page" data-title="Titre">
	
		<!-- /panel -->
		<div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

		</div>
		<!-- /panel -->
	
		<!-- header -->
		<div data-role="header" data-position="fixed">
			<a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
			<h1 id="id_titre">titre</h1>
			<a href="javascript:window.location = ('./page_contact.html?mili='+getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
		</div>
		<!-- /header -->

		<!-- content -->
		<div data-role="content" id="main_content">
                    
                    <div data-role="collapsible" data-collapsed="false" data-mini="true" id="content_editLivres">
                        <h4>Les tags</h4>
                        <div id="div_tags">
                            Vide
                        </div>           
                    </div>
                    
                    <div data-role="collapsible" data-collapsed="false" data-mini="true" id="content_editLivres">
                        <h4>Les derniers livres</h4>
                        <div class="ui-grid-d ui-responsive" id="div_lastLivres">
                            Vide
                        </div> 
                        Merci à nos contributeurs.
                    </div>    
		</div>
		<!-- /content -->
		
		<!-- footer -->
		<div data-role="footer" data-position="fixed">
			<a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./page_faq.html?mili='+getMilise());">FAQ</a>
			<h1 id="id_affichageUser">User</h1>
			<a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" href="javascript:window.location = ('./page_sortie.html?mili='+getMilise());">Logout</a>
		</div>
		<!-- /footer -->
		
	</div>
	<!-- /page -->
</body>
</html>